<template>
  <div style="width:100%;height:100%">
    <v-chart :options="option" :initOptions="initOptions" :theme="theme" autoresize />
  </div>
</template>
<script>

export default {
  name: 'chart',
  props: ['getDetail'],
  mounted () {
  },
  data () {
    return {
      initOptions: { renderer: 'canvas' },
      theme: 'default'
    }
  },
  methods: {
  },
  computed: {
    getData () {
      var data = []
      for (let i = 0, nr = this.getDetail.sheetData.length - 1; i < nr; i++) {
        data.push({
          name: this.getDetail.sheetData[i][0],
          value: this.getDetail.sheetData[i][1],
          textStyle: {
            normal: {
              fontFamily: this.getDetail.wordCloud.fontFamily,
              fontWeight: this.getDetail.wordCloud.fontWeight,
              color: this.getDetail.color.pure[(i % 12)]
            }
          }
        })
      }
      return data
    },
    option () {
      return {
        animation: false,
        tooltip: {
          show: true
        },
        // title: this.getDetail.title,
        series: [{
          shape: this.getDetail.wordCloud.shape,
          // maskImage:
          type: 'wordCloud',
          data: this.getData,
          left: null,
          right: null,
          top: null,
          bottom: null,
          width: '100%',
          height: '100%',
          sizeRange: this.getDetail.wordCloud.sizeRange,
          rotationRange: this.getDetail.wordCloud.rotationRange,
          rotationStep: this.getDetail.wordCloud.rotationStep,
          gridSize: this.getDetail.wordCloud.gridSize,
          drawOutOfBound: false,
          textStyle: {
            emphasis: {
                shadowBlur: 5,
                shadowColor: '#333'
            }
        }
        }],
        backgroundColor: this.getDetail.backgroundColor[this.getDetail.backgroundColor.option]
      }
    }
  }
}
</script>
<style scoped>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>
